<template>
	<view class="foot-item-container" @click="goDetail">
		<view class="foot-item-title" :class="data.isRed?'red':''">{{data.noticeInfo.title}}</view>
		
		<view class="foot-item-from">{{data.noticeInfo.publisher}}</view>
		<view style="display: flex;">
			<view class="foot-item-time">{{data.noticeInfo.posttime}}</view>
			<text class="foot-item-deadline" v-if="data.noticeInfo.deadline" :class="data.isRed?'red':''">【截止日期】{{data.noticeInfo.deadline}}</text>
		</view>
	</view>
</template>

<script>
	import {reactive,onMounted} from 'vue'
	export default{
		name:"foot-item",
		setup(props,context){
			let data = reactive({
				noticeInfo:{},
				isRed:false
			})
			
			onMounted(()=>{
				data.noticeInfo = props.noticeInfo;
				let time =(new Date(props.noticeInfo.deadline) - new Date())/1000/60/60/24;
				if(time<=2) data.isRed = true;
			})
			
			function goDetail(){
				uni.navigateTo({
					url:"/pages/notice/notice-detail?noticeUrl="+data.noticeInfo.link_url
				})
			}
			
			return {
				data,
				goDetail
			}
		}
	}
</script>

<style>
	.foot-item-container{
		margin:10rpx 30rpx;
		padding:5rpx 5rpx;
		border-bottom: 2rpx solid #515151;
	}
	
	.foot-item-title{
		font-size: 35rpx;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow:ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		line-clamp: 1;
		-webkit-box-orient: vertical;
		height: 45rpx;
		line-height: 45rpx;
		font-weight: bold;
	}
	
	.foot-item-from{
		margin-top: 10rpx;
		font-size: 27rpx;
		height: 30rpx;
		line-height: 30rpx;
	}
	
	.foot-item-time{
		font-size: 25rpx;
		color: #aaaaaa;
		height: 35rpx;
		line-height: 35rpx;
	}
	
	.foot-item-deadline{
		margin-left: 20rpx;
		font-size: 25rpx;
		color: #aaaaaa;
		height: 35rpx;
		line-height: 35rpx;
	}
	
	.red{
		color: #DE6868 !important;
	}
</style>